<template>
  <h1>{{person}}</h1>
  <button @click="changePerson">点击修改person</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref , watch} from "vue"

  const person = ref({
    name: "刘·二",
    age: 36,
    sex: "男",
    scrol:{
      en: 100,
      math: ["1" , "2" , "3"]
    }
  })
  const changePerson = () => {
    /* person.value = {
    name: "刘o_______o二",
    age: 36,
    sex: "男",
      scrol:{
        en: 100,
        math: ["1" , "2" , "3"]
      }
    } */

    // person.value.name = "刘o_______o二"

    person.value.scrol.en++

    // person.value.scrol.math[2]  = "10000"

    person.value.age++

    // person.value.scrol = {
    //   en: 100,
    //   math: ["1" , "2" , "3"]
    // }
  }

  //1.监听ref对象，可以监听到属性值的改变，默认不开启深度监听
  /* watch(person , (newval , oldval) => {
    console.log(newval , oldval);
  } , {deep: true}) */

  //2.监听ref对象中的value对象，监听的是value对象的属性，默认开启深度监听
  /* watch(person.value , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //3.监听ref对象中value对象的对象类型的属性，监听地是该对象的属性，默认开启深度监听
 /*  watch(person.value.scrol , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //4.监听ref对象中value对象的基本类型的属性，用函数写法
  /* watch(()=>person.value.age , (newval , oldval) => {
    console.log(newval , oldval);
  }) */

  //5.监听ref对象中value对象的对象类型的属性，但是函数写法，默认不开启深度监听
 /*  watch(()=>person.value.scrol , (newVal , oldVal) => {
    console.log(newVal , oldVal)
  } , {deep: true}) */

  //6.监听多个属性，数组写法
  /* watch([()=>person.value.age , person.value.scrol] , (newVal , oldVal) => {
    console.log(newVal , oldVal)
  })  */

  //7.监听多个属性，分开写法
  watch(()=>person.value.age , (newval , oldval) => {
    console.log(newval , oldval);
  })
  watch(person.value.scrol , (newval , oldval) => {
    console.log(newval , oldval);
  })
</script>